<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue">
			<block slot="content">{{ title }}</block>
		</cu-custom>
		<block v-for="(item, index) in list" :key="index">
			<barnner v-if="item.name === 'banner'" :source = "item"></barnner>
			<category v-if="item.name === 'category'" :source = "item"></category>
			<showcase-two v-if="item.name === 'showcase_two'" :source = "item"></showcase-two>
			<showcase-three v-if="item.name === 'showcase_three'" :source = "item"></showcase-three>
			<img-ad v-if="item.name === 'image_ad'" :source = "item"></img-ad>
			<product-list v-if="item.name === 'product_list'" :source = "item"></product-list>
			<search-pro v-if="item.name === 'search'" :source = "item"></search-pro>
			<slide-nav v-if="item.name === 'slide_nav'" :source = "item"></slide-nav>
			<brands v-if="item.name === 'brands'" :source = "item"></brands>
			<display-card v-if="item.name === 'display_card'" :source = "item"></display-card>
			<play-video v-if="item.name === 'video_u'" :source = "item"></play-video>
			<display-title v-if="item.name === 'title_u'" :source = "item"></display-title>
			<tel-phone v-if="item.name === 'phone_tel'" :source = "item"></tel-phone>
			<play-audio v-if="item.name === 'audio_musie'" :source = "item"></play-audio>
			<slide-product v-if="item.name === 'cross_skid'" :source = "item"></slide-product>
			<hot-list v-if="item.name === 'UnderMall_home'" :source = "item"></hot-list>
			<scroll-msg v-if="item.name === 'textPmd'" :source = "item"></scroll-msg>
			<cut-line v-if="item.name === 'cut_line'" :source = "item"></cut-line>
			<empty-content v-if="item.name === 'empty_content'" :source = "item"></empty-content>
			<video-section v-if="item.name === 'video_section'" :source = "item"></video-section>
			<text-section v-if="item.name === 'text_section'" :source = "item"></text-section>
			<shop-list v-if="item.name === 'UnderMall_home'" :source = "item"></shop-list>
			<view v-if="item.name === 'welcome' && views" class="welcome"><guide :source = "item" @welcome="views = $event"></guide></view>
		</block>
	</view>
</template>

<script>
	import Barnner from './swiper' // 轮播图
	import Category from './category' // 分类图标	
	import ShowcaseTwo from './showcasetwo' // 橱窗二图
	import ShowcaseThree from './showcasethree' // 橱窗三图
	import CutLine from './cutline' // 分割线
	import EmptyContent from './emptycontent' // 辅助留白
	import ImgAd from './image_ad' // 图片广告
	import ProductList from './product_list' // 商品
	import SearchPro from './lookpro' // 搜索	
	import SlideNav from './slidenav' // 导航链接
	import Brands from './brands' // 品牌街	
	import DisplayCard from './displaycard' // 专题卡片
	import PlayVideo from './video' // 视频组件
	import DisplayTitle from './title'  // 标题栏
	import TelPhone from './telphone' // 电话组件
	import PlayAudio from './audio' // 音频组件
	import SlideProduct from './slideproduct' // 横滑商品
	import HotList from './hotlist' //
	import ScrollMsg from './notice' // 公告
	import ShopList from './shop_list' // 店铺列表
	import videoSection from './videosection' // 视频专区
	import textSection from './textsection' // 文章专区
	import Guide from './guide'
	import { mapGetters } from 'vuex'
	
	export default {
		components: { 
			Barnner,
			Category,
			ShowcaseTwo,
			ShowcaseThree,
			CutLine,
 			EmptyContent,
			ImgAd,
			ProductList,
			SearchPro,
			SlideNav,
			Brands,
			DisplayCard,
			PlayVideo,
			DisplayTitle,
			TelPhone,
			PlayAudio,
			SlideProduct,
			HotList,
			ScrollMsg,
			ShopList,
			videoSection,
			textSection,
			Guide
		},
		props: {
			list: {
				type: Array,
				required: true
			}
		},
		data () {
			return {
				views: true
			}
		},
		computed: {
			...mapGetters(['navigator']),
			title () {
				return this.navigator.title
			}
		}
	}
</script>

<style lang="less">
view {
	overflow: hidden;
	.welcome {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 99999;
	}
}
</style>
